<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item><b>服务管理</b></el-breadcrumb-item>
      <el-breadcrumb-item>信籍管理</el-breadcrumb-item>
    </el-breadcrumb>
    <hr>

    <el-card style="font-size: 20px;font-family: 'Helvetica Nee',serif">
      <b>信籍管理</b>
      <p style="font-size: 15px">用于管理小区里业主的信箱信息，包括工作建议，意见反馈等。</p>
    </el-card>

    <el-card class="box-card">

      <div class="card-header">
        <el-row>
          <el-col :span="18">
            <Button type="success" icon="md-add">添加</Button>
          </el-col>
          <el-col :span="4">
            <Input search enter-button placeholder="请输入搜索的内容" @on-search="search()"/>
          </el-col>
          <!-- 根据小区查询下拉框 -->
          <el-col :span="2" style="text-align: right;">
            <Dropdown @on-click="selectByCommunity">
              <Button type="primary">
                根据小区查询
                <Icon type="ios-arrow-down"></Icon>
              </Button>
              <DropdownMenu slot="list">
                <DropdownItem :name="null">
                  所有小区
                </DropdownItem>
                <DropdownItem v-for="community, index in communityList" :key="index" :name="community.code">
                  {{ community.name }}
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </el-col>
        </el-row>
      </div>

      <!-- 数据表格 -->
      <el-table :border="true" ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column fixed prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="communityName" label="所属小区" width="200" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="source" label="信件来源" width="200" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="content" label="信件内容" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-switch
                @change="updateEnable(scope.row)"
                v-model="scope.row.state"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#999">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" width="180"></el-table-column>
        <el-table-column align="center" label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <ButtonGroup>
              <Button type="info" icon="md-create" @click="openEditDialog(scope.row)"></Button>
              <Button type="error" icon="md-trash" @click="deleteIds = [scope.row.id]; deleteByIds()"></Button>
            </ButtonGroup>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <!-- 分页查询 -->
        <Page :total="total" show-elevator show-sizer :current="currentPage" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"/>
      </div>

      <!-- 以下是弹出的修改相册的对话框 -->
      <el-dialog title="编辑信箱" :visible.sync="dialogFormVisibleUpdate">
        <el-form :model="editFormUpdate">
          <el-form-item label="所属小区" required>
            <el-select v-model="editFormUpdate.communityCode" placeholder="请选择" border>
              <el-option v-for="item, index in communityList" :key="index" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="信件来源" :label-width="formLabelWidth">
            <el-input v-model="editFormUpdate.source" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="信件内容" :label-width="formLabelWidth">
            <el-input v-model="editFormUpdate.content" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否已读">
            <el-switch
                v-model="editFormUpdate.state"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#999">
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
          <el-button type="primary" @click="update()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 添加弹窗 -->
      <el-dialog title="添加" :visible.sync="dialogFormVisibleAdd" center>
        <el-form :model="editFormAdd">
          <el-form-item label="所属小区" required>
            <el-select v-model="editFormAdd.communityCode" placeholder="请选择" border>
              <el-option v-for="item, index in communityList" :key="index" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="信件来源" required>
            <el-input v-model="editFormAdd.source"></el-input>
          </el-form-item>
          <el-form-item label="信件内容" required>
            <el-input v-model="editFormAdd.content"></el-input>
          </el-form-item>
          <el-form-item label="是否已读" required>
            <el-radio-group v-model="editFormAdd.state">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item center>
            <el-button type="primary" @click="add()">确 定</el-button>
            <el-button @click="dialogFormVisibleAdd = false">关 闭</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "index",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      loadTable: false,
      showDeleteButton: false,
      deleteIds: [],
      editFormUpdate: {},
      editFormAdd: {},
      dialogFormVisibleUpdate: false,
      dialogFormVisibleAdd: false,
      communityList: [],
      propertyList: [],
      communityCode: null,
      searchText: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    // 搜索方法
    search() {

    },
    // 改变第几页后调用的方法
    changePage(pageNum) {
      this.currentPage = pageNum;
      this.loadDataList();
    },
    // 改变每页多少条数据后调用的方法
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.loadDataList();
    },
    // 批量删除
    deleteByIds() {
      // 打开加载状态
      this.loadTable = true;
      let url = this.host + "/mailbox/delete?" + this.deleteIds.map(item => `ids=${encodeURIComponent(item)}`).join('&');
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.$message.success(response.data.data);
          this.loadDataList();
        } else {
          this.$message.error("删除失败，请稍后再试！");
        }
      });
      // 取消加载状态
      this.loadTable = false;
      this.deleteIds = [],
          this.showDeleteButton = false;
    },
    // 修改数据的方法
    update() {
      if (Object.keys(this.editFormUpdate).length === 0) {
        this.$message.error("请填写内容！");
        return;
      }
      let url = this.host + "/mailbox/update";
      this.axios.post(url, JSON.stringify(this.editFormUpdate), {
        headers: {
          "Content-Type": "application/json"
        }
      }).then((response) => {
        if (response.data.statusCode == 2000) {
          this.$message.success(response.data.data);
          this.dialogFormVisibleUpdate = false;
          this.loadDataList();
        } else {
          this.$message.error(response.data.message);
        }
      });
    },
    // 打开弹窗方法
    openEditDialog(row) {
      this.dialogFormVisibleUpdate = true;
      this.editFormUpdate = row;
    },
    // 选择更改是否调用后的方法
    updateEnable(brand) {
      console.log('你点击了处理状态的开关控件，当前开关值：' + brand.state);
      let enableText = ['未读', '已读'];
      let url = this.host + '/mailbox/' + brand.id;
      if (brand.state == 1) {
        url += '/enable';
      } else {
        url += '/disable';
      }
      console.log('url = ' + url);
      this.axios
          .post(url, {
            headers: {
              "Content-Type": "application/json"
            }
          }).then((response) => {
        let responseBody = response.data;
        if (responseBody.statusCode == 2000) {
          let message = '修改状态为【' + enableText[brand.state] + '】成功！';
          this.$message({
            message: message,
            type: 'success'
          });
        } else {
          this.$message.error(responseBody.message);
        }
        if (responseBody.statusCode == 40400) {
          this.loadDataList();
        }
      });
    },
    // 选择小区后调用的方法
    selectByCommunity(communityCode) {
      this.communityCode = communityCode;
      this.loadDataList();
    },
    // 添加数据方法
    add() {
      if (Object.keys(this.editFormAdd).length === 0) {
        this.$message.error("请填写内容！");
        return;
      }
      let url = this.host + "/mailbox/add";
      this.axios.post(url, JSON.stringify(this.editFormAdd), {
        headers: {
          "Content-Type": "application/json"
        }
      }).then((response) => {
        if (response.data.statusCode == 2000) {
          this.$message.success(response.data.data);
          this.dialogFormVisibleAdd = false;
          this.loadDataList();
        } else {
          this.$message.error(response.data.message);
        }
      });
    },
    /*----------------------------------------------------------*/
    handleSelectionChange(rows) {
      if (rows.length === 0) {
        this.showDeleteButton = false;
        return;
      }
      this.showDeleteButton = true;
      for (let item of rows) {
        this.deleteIds.push(item.id);
      }
    },
    /*--------------------------------------------------------*/
    // 加载当前模块数据
    loadDataList() {
      this.loadTable = true;
      console.log("进入loadData");
      let url = this.host + "/mailbox/list?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize;

      if (this.communityCode != null) {
        url = this.host + "/mailbox/list?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&communityCode=" + this.communityCode;
      }

      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.tableData = response.data.data.records;
          this.currentPage = response.data.data.current;
          this.pageSize = response.data.data.size;
          this.total = response.data.data.total;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
      this.loadTable = false;
    },
    // 加载所有小区数据
    loadCommunityList() {
      let url = this.host + "/community/list";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.communityList = response.data.data.records;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    // 加载所有房产数据
    loadPropertyList() {
      let url = this.host + "/property/list";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.propertyList = response.data.data.records;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    /*--------------------------------------------------------*/

  },
  mounted() {
    // 页面初始化后调用加载本模块数据和小区等的所有数据
    this.loadDataList();
    this.loadCommunityList();
    this.loadPropertyList();
  }

}
</script>

<style scoped>
.card-header {
  margin-bottom: 20px;
}

.block {
  text-align: center;
  margin-top: 10px;
}

.el-select {
  margin-left: 15px;
  margin-right: 30px;
}

.el-date-picker {
  margin-left: 50px;
}
</style>
